<template>
  <div class="page has-headbar page-news-list">
    <head-bar :title="$route.meta.title" :prevRoute="{name: 'home'}" />
    <div class="news-box">
      <van-tabs @click="onTabClick">
        <empty-data v-if="!categorys.length"></empty-data>
        <template v-for="cate in categorys">
          <van-tab :title="cate.cateTitle" :key="cate.categoryID">
            <van-pull-refresh v-model="categoryLists[cate.categoryID].refreshLoading" @refresh="onRefresh(cate.categoryID)">
              <van-list
                v-model="categoryLists[cate.categoryID].moreLoading"
                :finished="categoryLists[cate.categoryID].moreFinished"
                @load="onLoad(cate.categoryID)">
                <van-swipe v-if="categoryLists[cate.categoryID].banners.length" :autoplay="3000">
                  <template v-for="item in categoryLists[cate.categoryID].banners">
                    <van-swipe-item :key="item.newsID">
                      <a v-if="item.url" :href="item.url" class="banner-item" :style="{backgroundImage: `url(${item.imageUrl})`}"><div class="title">{{item.title}}</div></a>
                      <router-link v-else tag="div" :to="{name: 'news-detail', params: {id: item.newsID}}" class="banner-item" :style="{backgroundImage: `url(${item.imageUrl})`}">
                        <div class="title">{{item.title}}</div>
                      </router-link>
                    </van-swipe-item>
                  </template>
                </van-swipe>
                <div class="list">
                  <empty-data v-if="!categoryLists[cate.categoryID].list.length"></empty-data>
                  <template v-for="item in categoryLists[cate.categoryID].list">
                    <list-item :key="item.newsID" :item-data="item"></list-item>
                  </template>
                </div>
              </van-list>
            </van-pull-refresh>
          </van-tab>
        </template>
      </van-tabs>
    </div>
  </div>
</template>

<script>
import { Tabs, Tab, Swipe, SwipeItem } from 'vant'
import ListItem from './components/ListItem'
import { API_CATEGORYS, API_CATEGORY_NEWS } from '@/service/news'
import { NEWS_ID } from '@/libs/config'
export default {
  name: 'news-list',
  components: {
    [Tabs.name]: Tabs,
    [Tab.name]: Tab,
    [Swipe.name]: Swipe,
    [SwipeItem.name]: SwipeItem,
    ListItem
  },
  data () {
    return {
      categorys: [],
      pageSize: 12,
      categoryLists: {} // 各个分类列表
    }
  },
  mounted () {
    this.requestCategory().then(() => {
      let categoryID = this.categorys[0].categoryID
      this.requestCategoryBanner(categoryID)
    })
  },
  methods: {
    requestCategory () {
      let reqData = { fid: NEWS_ID }
      return API_CATEGORYS(reqData).then(resData => {
        this.categorys = resData.list
        resData.list.forEach(element => {
          this.$set(this.categoryLists, element.categoryID, {
            pageNumber: 0,
            moreLoading: false,
            moreFinished: false,
            refreshLoading: false,
            list: [],
            banners: []
          })
        })
      })
    },
    requestCategoryBanner (categoryID) {
      let reqData = {
        catId: categoryID,
        pageSize: 5,
        pageNumber: 1,
        isTop: 2
      }
      API_CATEGORY_NEWS(reqData).then(resData => {
        let { list, total } = resData
        if (list.length <= 0) {
          this.$set(this.categoryLists[categoryID], 'banners', [])
        } else {
          this.$set(this.categoryLists[categoryID], 'banners', list)
        }
      })
    },
    requestCategoryList (categoryID, pageNumber, callback) {
      let reqData = {
        catId: categoryID,
        pageSize: this.pageSize,
        pageNumber: pageNumber + 1,
        isTop: 0
      }
      return API_CATEGORY_NEWS(reqData).then(resData => {
        callback && callback(resData)
      })
    },
    onTabClick (index) {
      let categoryID = this.categorys[index].categoryID
      this.requestCategoryBanner(categoryID)
    },
    onLoad (categoryID) {
      // console.log(categoryID)
      this.requestCategoryList(categoryID, this.categoryLists[categoryID].pageNumber, (resData) => {
        let { list, total } = resData
        if (list.length <= 0) {
          this.$set(this.categoryLists[categoryID], 'moreFinished', true)
        } else {
          this.$set(this.categoryLists[categoryID], 'pageNumber', this.categoryLists[categoryID].pageNumber + 1)
          this.$set(this.categoryLists[categoryID], 'list', [...this.categoryLists[categoryID].list, ...list])
          if (total === this.categoryLists[categoryID].list.length) {
            this.$set(this.categoryLists[categoryID], 'moreFinished', true)
          }
        }
      }).catch(() => {
        this.$set(this.categoryLists[categoryID], 'moreFinished', true)
      }).finally(() => {
        this.$set(this.categoryLists[categoryID], 'moreLoading', false)
      })
    },
    onRefresh (categoryID) {
      // console.log(categoryID)
      this.$set(this.categoryLists[categoryID], 'pageNumber', 0)
      this.$set(this.categoryLists[categoryID], 'refreshLoading', true)
      this.requestCategoryList(categoryID, this.categoryLists[categoryID].pageNumber, (resData) => {
        let { list } = resData
        this.$set(this.categoryLists[categoryID], 'list', list)
      }).finally(() => {
        this.$set(this.categoryLists[categoryID], 'refreshLoading', false)
      })
    }
  }
}
</script>

<style lang="less">
.page-news-list{
  height: 100%;
  box-sizing: border-box;
  background: url('../../assets/images/new_bg.png') no-repeat center top/100% auto #6F86ED;
  .van-nav-bar{
    background:none;
    &:after{
      display: none;
    }

    .van-icon,.van-nav-bar__text{
      color: #fff!important;
    }
  }
  .news-box{
    padding-top: 30px;
    height: 100%;
    box-sizing: border-box;
  }
  .van-hairline--top-bottom::after{
    border-width: 0;
  }
  .van-tabs__wrap,.van-tabs__nav,.van-tab{
    background:none;
  }
  .van-tab{
    color: #fff;
    font-size: 14px;
    transition: all 0.2s ease-in-out;
  }
  .van-tabs {
    height: 100%;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
  }
  .van-tab--active{
    font-size: 16px;
  }
  .van-tabs__line{
    background-color: #fff;
  }
  .van-tabs__content{
    background-color: #fff;
    flex: 1;
  }
  .van-tab__pane {
    height: 100%;
  }
  .van-pull-refresh{
    // height: 100%;
  }
  .van-pull-refresh__track {
    min-height: 100%;
  }
  /* banner */
  .van-swipe{
    height: 410/2px;
  }
  .van-swipe__indicator{
    background-color: #B3B3B3;
  }
  .van-swipe__indicator--active {
    background-color: #303030;
  }
  .banner-item {
    display: block;
    width: percentage(704/750);
    height: 330/2px;
    margin: 0 auto;
    border-radius: 5px;
    margin-top: 12.5px;
    overflow: hidden;
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center center;
    position: relative;
    .title{
      position: absolute;
      width: 100%;
      left: 0;
      bottom: 0;
      padding: 10px 14px;
      font-size: 13px;
      box-sizing: border-box;
      background-color: rgba(0, 0, 0, 0.5);
      color: #fff;
    }
  }
  /* llist */
  .list{
    padding: 0 12px;
  }
}
</style>
